<template>
   <qiun-data-charts 
	 type="line" 
	 background="rgba(0,0,0,0)"
	 :opts="mainLineOpt" 
	 :chartData="mainLineData" 
	 :ontouch="true" 
   />
</template>

<script setup>
	import {
		baseOpts
	} from "@/uitls/uChartsOpt.js"
	import {
		dateTypeFormat
	} from "@/uitls/tool.js"
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		ref,
		computed,
		defineProps,
		watch,
		nextTick,
		onMounted
	} from 'vue'
	const props = defineProps({
		month: String,
		tag: { 
			type: Array,
			default: () => ["收入", "支出"]
		},
		inOutTag:{//判断是收入还是支出
			type:Boolean,
			default:true,
		}
	})
	import store from '@/store/index.js';
	const fontSize = computed(() => store.state.fontSize)
	const mainLineOpt = computed(() => ({
	  ...baseOpts,
	  	...{
	  		fontSize: fontSize.value,
	  		enableScroll: true,
	  		legend: {
	  			show: false,
	  		},
	  		xAxis: {
	  			itemCount: 5,
					fontSize: fontSize.value,
					calibration: true,
	  		},
	  		yAxis: {
	  			dashLength: 10,
	  			data: [{
	  				axisLine: false,
	  				format: "bigNumber"
	  			}],
	  		},
	  		extra: {
	  			line: {
	  				type: "straight",
	  				width: 2,
	  				activeType: "hollow"
	  			}
	  		}
	  	}
	  }))
	const mainLineData = ref(false)
	const allData = computed(() => store.state.mainData.allData)
	const getMonthData = () => {
		let monthEnd = parseInt(dateTypeFormat("d", new Date(props.month), "end"))
		let categories = []
		let dataList = []
		for (let i = 0; i < props.tag.length; i++) {
			let one = {
				name: props.tag[i],
				data: []
			}
			dataList.push(one)
		}
		for (let i = 1; i <= monthEnd; i++) {
			dataList.forEach((item) => {
				item.data.push(0)
			})
			let addI = i < 10 ? "0" + i : i
			let time = props.month + "-" + addI
			categories.push(dateTypeFormat('m-dd', new Date(time)))
		}
		if (allData.value[props.month] != void 0) {
			allData.value[props.month].forEach((item) => {
				for (let i =0;i<categories.length;i++) {//日期 
					if (dateTypeFormat('m-dd', new Date(item.timeValue)) == categories[i]) {
						if (JSON.stringify(props.tag) === JSON.stringify(["收入", "支出"])) {
							if (item.showClass == 0) {
								dataList[0].data[i] += parseFloat(item.addValue)
							} else {
								dataList[1].data[i] += parseFloat(item.addValue)
							}
						} else {
							if (props.tag[0] == item.showOne && props.inOutTag==item.showClass) {
								dataList[0].data[i] += parseFloat(item.addValue)
							}
						}
					}
				}
			})
		}
		return {
			categories: categories,
			series: dataList
		}
	}
	watch(() => props.month, (n) => {
		mainLineData.value = getMonthData()
	}, {
		immediate: true
	})
	const baseMonthData=JSON.parse(JSON.stringify(store.state.mainData.allData[props.month] || {}))
	onShow(()=>{
		if(baseMonthData.value!=store.state.mainData.allData[props.month]){
			mainLineData.value = getMonthData()
			console.log(mainLineData.value)
			baseMonthData.value=JSON.parse(JSON.stringify(store.state.mainData.allData[props.month] || {}))
		}
	})
</script>

<style lang="scss" scoped>
</style>